<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>
    <style>
        table{

        }
        table tr input{
            height: 30px;
            margin: 5px 5px;
            line-height: 30px;
        }
        table tr,.input_text{
            height: 30px;
            margin: 5px 5px;
            width: 200px;
        }
        table tr td{
            border: 1px solid #cccccc;
        }
    </style>
</head>
<body>
<div id="text_show">
    form标签是表单标签
        action属性设置提交的服务器地址<br/>
        method属性设置提交的方式GET(默认值)或POST<br/>

    表单提交的时候,数据没有发送给服务器的三种情况:<br/>
        1:表单项没有name属性值<br/>
        2:单选,复选(下拉列表中的option标签)都需要添加value属性,以便发送给服务器<br/>
        3:表单项不在提交的form标签中<br/>

    GET请求的特点是：<br/>
        1：浏览器地址栏中的地址是 : action属性[+?+请求参数]<br/>
            请求参数的格式是: name=value&name=value<br/>
        2:不安全<br/>
        3：它有数据长度的限制<br/>

    POST请求的特点：<br/>
        1.浏览器地址栏中只有action属性值<br/>
        2.相对GET请求要安全<br/>
        3.理论上没有数据长度的限制<br/>

</div>

<form action="http://localhost:8080" method="post">
    <h1 align="center">用户注册</h1>
    <input type="hidden" name="action" value="login">
    <table width="800" cellspacing="0" align="center">
        <tr>
            <td>用户名称：</td>
            <td>
                <input type="text" value="樊振东" name="username" class="input_text"/>
            </td>
        </tr>

        <tr>
            <td>用户密码：</td>
            <td>
                <input type="password" value="123456" name="password" class="input_text"/>
            </td>
        </tr>

        <tr>
            <td>确认密码：</td>
            <td>
                <input type="password" name="repassword" value="123456" />
            </td>
        </tr>

        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex"/>男
                <input type="radio" name="sex"/>女
            </td>
        </tr>

        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox" checked="checked" name="hobby">Java
                <input type="checkbox" checked="checked" name="hobby">JavaScript
                <input type="checkbox" checked="checked" name="hobby">php
            </td>
        </tr>

        <tr>
            <td>国籍：</td>
            <td>
                <select name="country" id="">
                    <option value="0">---请选择国籍---</option>
                    <option value="中国" selected>中国</option>
                    <option value="美国">美国</option>
                    <option value="日本">日本</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>自我评价：</td>
            <td>
                <textarea name="desc" id="introduce" cols="30" rows="10">默认介绍</textarea>
            </td>
        </tr>

        <tr align="center">
            <td colspan="2"><input type="reset" value="重置" > <input type="submit" value="提交"></td>
        </tr>


    </table>


</form>

<div class="look_source_code" onclick="getPageContent()">查看源码</div>
</body>
</html>